<template>
      <div class="course-list">
        <course-item v-for="(item, index) in courses" :key="index" :courseId="item.id"
            :name="item.name" :desc="item.description" :s_time="item.start_time" :e_time="item.end_time" :price="item.price"
            :thumb="item.coach.preview.image | qnImg(null, 100)" :over="item.love" :appointment="item.appointment" :type="item.type"
        ></course-item>
      </div>
</template>

<script>
import courseItem from '../../components/base/course-item.vue'
export default {
  name: 'shop-list',
  comments: 'shop-list',
  components: {
    'course-item': courseItem
  },
  data () {
    return {
      shopId: '',
      coachId: '',
      type: '',
      courses: []
    }
  },
  watch: {
  },
  created () {
    window.document.title = '课程列表'
    this.shopId = this.$route.params.shop_id
    this.coachId = this.$route.params.coach_id
    this.type = this.$router.currentRoute.query.type
    this.getCourses()
  },
  methods: {
    // 获取健身房下所有的课程
    getCourses: function () {
      var that = this
      this.$axios.get('/courses', {
        params: {
          gyms: that.shopId,
          coach_id: that.coachId,
          type: that.type
        }
      }).then(response => {
        that.courses = response.data
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.shop{
    background-color: #f8f8f8;
    color: #eb83ec;
    font-size: 1rem;
    padding: 3px 8px;
    position: relative;
    height: 1.4rem;
    line-height: 1.4rem;
}
.shop-name{
    float: left;
}
.shop-map{
    float: right;
    font-size: 0.8rem;
    display: flex;
}
.shop-map label{
    // position: absolute;
    // right: 22px;
}
.shop-map-arrow{
    // position: absolute;
    // right: 10px;
    // top: 3px;
    align-self: center;
}
.shop-item{
    height: 110px;
    width: 100%;
    background-color: #2f2828;
    color: white;
    border-radius: 5px;
    position: relative;
    margin-top: 6px;
    overflow: hidden;
}
.shop-img{
    max-width: 100%;
    height: auto;
}
.shop-content{
    position: absolute;
    bottom: 5px;
    left: 5px;
    text-align: left;
}
.shop-address{
    font-size: 10px;
    text-align: left;
}
.shop-good{
    position: absolute;
    right: 5%;
    bottom: 5%;
    color: red;
}
.course-list{
    padding: 4px 8px;
}
.course-list div:first-child{
    margin-top: 0px;
}
.course-list div:last-child {
    border: none;
}
</style>
